﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>7.float</title>
    <script>
        //使用绝对定位都并不是很理想，那么我们可以考虑使用float来解决。我们可以在一个元素上使用float，让元素向左或向右，而且还可以使用文本围绕在这个元素的周边（这个作用在文本围绕图片特别有用）。
    </script>
    <style>
            #example {
				float: right;
			}
 
			#example p {
				margin: 0 0.25em;
				padding: 0.25em 0;
			}
			#div-before,
			#div-after {
				background-color: #88d;
				color: #000;
			}
 
			#div-1 {
				width: 400px;
				background-color: #000;
				color: #fff;
			}
 
			#div-1-padding {
				padding: 10px;
			}
 
			#div-1a {
				background-color: #d33;
				color: #fff;
			}
 
			#div-1b {
				background-color: #3d3;
				color: #fff;
			}
 
			#div-1c {
				background-color: #33d;
				color: #fff;
			}

            #div-1a {
			 float:left;
			 width:200px;
			}
    </style>
</head>
<body>
    <div id="example">
        <div id="div-before">
            <p>id = div-before</p>
        </div>
        <div id="div-1">
            <div id="div-1-padding">
                <p>id = div-1</p>
                <div id="div-1a">
                    <p>id = div-1a</p>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p>
                </div>
                <div id="div-1b">
                    <p>id = div-1b</p>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem.</p>
                </div>
                <div id="div-1c">
                    <p>id = div-1c</p>
                </div>
            </div>
        </div>
        <div id="div-after">
            <p>id = div-after</p>
        </div>
    </div>
</body>
</html>